<template>
  <div ref="radar" class="radar-wrap"></div>
</template>

<script>
// 导入核心echarts功能
import * as echarts from "echarts/core";
// 引入雷达图图标,图表后缀都为 Chart
import { RadarChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import { TitleComponent, TooltipComponent } from "echarts/components";
// 引入 Canvas 渲染器
import { CanvasRenderer } from "echarts/renderers";

// 注册组件
echarts.use([RadarChart, TitleComponent, TooltipComponent, CanvasRenderer]);
export default {
  created() {
    // 一打开页面就要显示的,但是created中无法访问dom元素,需要在mounted中
  },
  mounted() {
    let myChart = echarts.init(this.$refs.radar);

    let option = {
      title: {
        text: "个人能力",
      },
      radar: {
        // shape: "circle",
        indicator: [
          { name: "绩效", max: 100 },
          { name: "考勤", max: 100 },
          { name: "能力", max: 100 },
          { name: "心理健康", max: 100 },
          { name: "工作效率", max: 100 },
          { name: "获奖情况", max: 100 },
        ],
      },
      series: [
        {
          type: "radar",
          data: [
            { value: [95, 96, 90, 85, 80, 92], name: "杨方" },
            { value: [75, 76, 80, 85, 90, 72], name: "雷威" },
          ],
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>

<style>
.radar-wrap {
  width: 400px;
  height: 400px;
}
</style>